<template>
    <el-radio-group v-model="currentTab" class="tab-btn-group-v2">
        <el-radio-button
            v-for="item in tabList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
        >
            {{ item.label }}
        </el-radio-button>
    </el-radio-group>
</template>

<script setup lang="ts">
const props = withDefaults(
    defineProps<{
        tabList: { label: string; value: string | number }[]
        modelValue?: string | number
    }>(),
    {
        tabList: () => [],
    },
)

const emit = defineEmits(['update:modelValue', 'change'])

// tab列表
const currentTab = computed({
    get: () => {
        return props.modelValue
    },
    set: (v: any) => {
        emit('update:modelValue', v)
        emit('change', v)
    },
})
</script>

<style lang="scss" scoped>
.tab-btn-group-v2 {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;

    :deep(.el-radio-button) {
        flex: auto;

        .el-radio-button__inner {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 28px;
            padding: 0 !important;
            font-size: 20px;
            background: rgba(0, 29, 33, 0.6);
            border: 1px solid rgba(1, 125, 114, 1);
            border-radius: 4px;
            font-weight: 400;
        }

        &.is-active .el-radio-button__inner {
            background: rgba(0, 212, 109, 1) !important;
            box-shadow: none !important;
        }
    }
}
</style>
